﻿<template>
    <el-col :sm="24" :md="pzoption.mdwidth"  v-show="ishide">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <el-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
            <el-input v-show="!childpro.disabled" :placeholder="childpro.placeholder" :type="childpro.itemtype" :disabled="childpro.disabled" :readonly="childpro.readonly" v-model="pzoption.value"  :maxlength="childpro.maxlength" show-word-limit clearable>
            </el-input>
            <div class="disdiv" v-show="childpro.disabled" v-html="pzoption.value">

            </div>
        </el-form-item>
        <el-dialog title="组件属性" :visible.sync="dialogInputVisible">
            <el-form :model="childpro">
                <el-form-item label="输入框类型">
                    <el-radio v-model="childpro.itemtype" label="text">普通文本</el-radio>
                    <el-radio v-model="childpro.itemtype" label="textarea">多行文本</el-radio>
                </el-form-item>
                <el-form-item label="占位符">
                    <el-input v-model="childpro.placeholder" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="字数限制">
                    <el-input-number v-model="childpro.maxlength"></el-input-number>
                </el-form-item>
                <el-form-item label="默认值">
                    <el-input v-model="childpro.defval" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="必填">
                    <el-switch v-model="childpro.rules.required"></el-switch>
                </el-form-item>
                <el-form-item label="只读">
                    <el-switch v-model="childpro.readonly"></el-switch>
                </el-form-item>
                <el-form-item label="隐藏字段">
                    <el-switch v-model="childpro.hidefiled"></el-switch>
                </el-form-item>


            </el-form>
        </el-dialog>
    </el-col>

</template>
<script>
    module.exports = {
        props: ['pzoption', 'index'],
        data: function () {
            return {
                dialogInputVisible: false,
                childpro: {
                    placeholder: "",
                    disabled: false,
                    readonly: false,
                    hide: false,
                    maxlength:100,
                    hidefiled: false,//隐藏字段，全过程隐藏
                    itemtype: "text",
                    localurl: "",
                    defval: "",
                    rules: {
                        required: false, message: '不能为空', type: "string"
                    }
                }
            }
        },
        computed: {
            ishide() {
                return (!this.childpro.hide && !this.childpro.hidefiled) || window.location.href.indexOf('FormBuildV1') > -1;
            }
        },
        methods: {
            delWid: function (wigdetcode) {
                // 子组件中触发父组件方法ee并传值cc12345
                this.$root.nowwidget = {};
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
              
                if (pro.$root.addchildwig) {
                    pro.$root.addchildwig();
                }
                if (pro.pzoption.childpro.itemtype) {
                    pro.childpro = pro.pzoption.childpro;
                    if (app.isview) {
                        pro.pzoption.value = app.jxparam(pro.childpro.defval);
                    }
                } else {
                    pro.pzoption.childpro = pro.childpro;

                }
                pro.childpro.localurl = window.location.href;
            })

        },
        watch: {
        }
    };
</script>